<template>
    <div class="recommend">
        <div class="recommend-item" v-for="(item,index) in recommends.slice(0,4)" :key="index">
            <a href="/detail" @click.prevent="goDetail(index)">
                <img :src=item.url alt="">
                <div>{{item.title}}</div>
            </a>
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs} from "vue";
    import {useRouter} from "vue-router";

    export default {
        props: {
            recommends: {
                type: Array,
                default(){
                    return []
                }
            },

            setup(){
                const state = reactive({
                    count: 0
                })
                const router = useRouter()
                const goDetail = (id) =>{
                    router.push({
                        path: '/detail',
                        query: {id}
                    })
                }

                return {
                    goDetail,
                    ...toRefs(state)
                }
            }
        }
    }

</script>

<style lang="scss" scoped>
    .recommend{
        display: flex;
        width: 100%;
        text-align: center;
        padding: 15px 0 30px;
        border-bottom: 8px solid #eee;
        font-size: 12px;
    }

    .recommend-item{
        flex: 1;
        img{
            width: 88px;
            height: 80px;
            margin-top: 10px;
        }
    }
</style>